<template>
  <view class="verify-container">
    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-bar">
        <input class="search-input" placeholder="搜索" v-model="searchKeyword" @confirm="search" />
        <button class="search-btn" @click="search">搜索</button>
      </view>
    </view>

    <!-- 记录列表 -->
    <scroll-view class="record-list" scroll-y>
      <view class="record-item" v-for="(record, index) in verifyRecords" :key="record.id || index">
        <text class="service-name">{{ record.name || '服务名称' }}</text>
        <text class="order-info">下单用户：{{ record.createBy || '未知用户' }}</text>
        <text class="order-info">实付金额：¥{{ record.price || 0 }}</text>
        <text class="verify-time">核销时间：{{ record.updateTime || '' }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import request from '@/utils/request'

// 定义核销记录类型
interface VerifyRecord {
  id: string;
  name: string;
  price: number;
  createBy: string;
  createTime: string | null;
  updateTime: string;
  // 其他可能存在的字段
  carId: string | null;
  couponId: string | null;
  deleted: string | null;
  evaluate: string | null;
  orderTime: string | null;
  payStatus: string | null;
  payTime: string | null;
  reservationTime: string | null;
  serviceId: string | null;
  status: string | null;
  verificationCode: string | null;
}

// 响应式数据
const searchKeyword = ref('');
const verifyRecords = ref<VerifyRecord[]>([]);

// 搜索功能
const search = (): void => {
  getVerifyRecords();
};

//获取已核销订单数据
const getVerifyRecords = async () => {
  request({
    url: "/wsy/order/verification", // 接口路径（会自动拼接基地址）
    method: "GET", // 请求方式
    data: {
      name: searchKeyword.value // 传递name参数
    }
  })
    .then(res => {
      // 接口请求成功（后端返回200状态码）
      console.log("查询成功：", res);
      // 根据截图，接口返回的数据包含在res中，可能是数组形式
      // 假设res是包含记录的数组或者res.data是包含记录的数组
      if (Array.isArray(res)) {
        verifyRecords.value = res;
      } else if (Array.isArray(res.data)) {
        verifyRecords.value = res.data;
      } else if (res.code === 0 && Array.isArray(res.result)) {
        // 常见的接口响应格式
        verifyRecords.value = res.result;
      } else {
        console.error("数据格式不符合预期", res);
        verifyRecords.value = [];
      }
    })
    .catch(err => {
      // 接口请求失败（状态码非200或网络错误）
      console.error("查询失败：", err);
      verifyRecords.value = [];
    });
};

// 页面加载时获取数据
onMounted(() => {
  // 直接调用接口获取真实数据，不再使用模拟数据
  getVerifyRecords();
});
</script>

<style lang="scss" scoped>
.verify-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 头部导航 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  position: relative;
}

.back-btn {
  font-size: 48rpx;
  color: #333333;
}

.page-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: 600;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header-right {
  width: 48rpx;
}

/* 搜索区域 */
.search-section {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.search-bar {
  display: flex;
  gap: 20rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #666666;
}

.search-btn {
  width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #1989fa;
  background-color: transparent;
  border: none;
  padding: 0;
}

/* 记录列表 */
.record-list {
  padding: 0 30rpx 30rpx;
  min-height: calc(100vh - 230rpx);
}

.record-item {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.service-name {
  display: block;
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.order-info {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 12rpx;
}

.verify-time {
  display: block;
  font-size: 26rpx;
  color: #999999;
  margin-top: 16rpx;
}
</style>